<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<!--//归vue 管-->
<div id="app">

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group>
                        <template slot="title">博客分类管理</template>
                        <el-menu-item index="2-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="2-3">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>毁灭世界</span>
            </el-header>

            <el-main>

                <el-row>
                    <el-button type="success" @click="dialogVisible = true">新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="categoryId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="edit(scope.row.categoryId)">
                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="del(scope.row.categoryId)">
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
            <!--      //点新增跳出来的窗口-->
            <el-dialog
                    title="新增分类"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <el-form>
                    <el-form-item label="分类名称">
                        <el-input v-model="name" placeholder="分类名称不能超过20个字"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </el-dialog>
        </el-container>
    </el-container>
</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/category.js"></script>
<script>
    // vue 框架
    new Vue({
        //固定格式
        el: '#app',
        //零时存贮数据
        data() {
            return {
                tableData: [],
                //弹窗
                dialogVisible: false,
                //分类表名字
                name: '',
                //分类表id
                id: '-1'
            }
        },
        //生命周期，页面第一趟出现不需要我们自己打开，每次操作生命周期跑一次
        mounted() {
            //then之后的方法必须执行
            getAllCategories().then(res => {
                //res就相当于一个变量用来接收数据
                console.log(res)
                // 通过后端传回来的数据中的flag的true或者false
                if (res.data.flag) {
                    //拿后端返回的数据来更新上面的tableData，第一个date是控制层返回的，第二个是mybeitisi中的方法返回的
                    this.tableData = res.data.data
                }
            })
        },
        methods: {
            add() {
                // 输出判断有没有id
                console.log("id=" + this.id)
                if (this.id !== '-1') {

                    console.log("更新")
                    //如果获得了id就走修改方法
                    this.myUpdate()
                    return
                }
                //如果没有id就走增加方法
                //console.log("新增")
                addCategory({"categoryName": this.name}).then(res => {
                    console.log(res)
                    //判断收到的数据里的错误或者成功
                    if (res.data.flag) {
                        //关闭窗口
                        this.dialogVisible = false
                        //刷新页面
                        getAllCategories().then(res => {
                            console.log(res)
                            if (res.data.flag) {
                                //拿后端返回的数据来更新上面的tableData
                                this.tableData = res.data.data
                            }
                        })
                    }
                })
            },
            edit(id) {
                console.log("id=" + id.categoryId)
                //请求数据，根据后端传来的id进行干活
                findCategoryById(id).then(res => {
                    if (res.data.flag) {
                        //绑定数据
                        this.name = res.data.data.categoryName
                        this.id = res.data.data.categoryId
                    }
                })
                //显示弹框
                this.dialogVisible = true
            },
            myUpdate() {
                // 实现真正的更新                  冒号就相当于赋值
                updateCategory({"categoryName": this.name, "categoryId": this.id}).then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //隐藏弹框
                        this.dialogVisible = true
                        //状态还原，如果没有就没办法在新增
                        this.id = '-1'
                        this.name = {}
                        getAllCategories().then(res => {
                            console.log(res)
                            if (res.data.flag) {
                                //拿后端返回的数据来更新上面的tableData
                                this.tableData = res.data.data
                            }
                        })
                        //关闭窗口
                        this.dialogVisible = false
                    }
                })
            },
            //删除
            del(id) {
                this.$confirm('此操作将删除该记录，是否继续？', '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    //真正删除动作
                    deleteCategory(id).then(res => {
                        console.log(res)
                        console.log(res.data)
                        console.log("666:" + res.data.flag)
                 //判断获得的数据里的flag是正确还是错误
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //刷新列表
                            this._getBlogs()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '已取消删除'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }, _getBlogs() {
                getAllCategories().then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //拿后端返回的数据来更新上面的tableData
                        this.tableData = res.data.data
                    }
                })
            }
        }
    })
</script>

</html>